<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 数据展示</title>
    <script src="{{url_for('static',path='/echarts.min.js')}}"></script>
</head>
<body>


<a href="http://localhost:8000/items/1">跳转</a>
    <h1>客户总金额统计</h1>
    <div id="total_by_customer" style="width: 600px; height: 400px;"></div>

    <h1>省份订单数量统计</h1>
    <div id="orders_by_province" style="width: 600px; height: 400px;"></div>

    <h1>平均送货延迟时间</h1>
    <div id="average_delay" style="width: 600px; height: 400px;"></div>

    <script>
        // 渲染客户总金额统计
        var total_by_customer = {{ total_by_customer | safe }};

        var categories = total_by_customer.map(item => item['客户名称']);
        var values = total_by_customer.map(item => item['金额']);
        var chart1 = echarts.init(document.getElementById('total_by_customer'));
        chart1.setOption({
            xAxis: {
                type: 'category',
                data: categories
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: values,
                type: 'bar'
            }]
        });

        // 渲染省份订单数量统计
        var orders_by_province = {{ orders_by_province | safe }};
        var categories2 = orders_by_province.map(item => item['客户省份']);
        var values2 = orders_by_province.map(item => item['订单编号']);
        var chart2 = echarts.init(document.getElementById('orders_by_province'));
        chart2.setOption({
            xAxis: {
                type: 'category',
                data: categories2
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: values2,
                type: 'bar'
            }]
        });

        // 渲染平均送货延迟时间
        var average_delay = {{ average_delay }};
        var chart3 = echarts.init(document.getElementById('average_delay'));
        chart3.setOption({
            title: {
                text: '平均送货延迟时间 (天)'
            },
            series: [{
                data: [average_delay],
                type: 'bar'
            }]
        });
    </script>
</body>
</html>
